<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="800px"
      append-to-body
      :before-close="close"
    >
      <div class="container">
        <div class="container__title">仅支持拆分费用金额或押金金额</div>
        <div class="container__content">
          <el-descriptions :column="1">
            <el-descriptions-item label="房间">{{ form.premisesAddress }}</el-descriptions-item>
            <el-descriptions-item label="账单周期">
              {{$moment(form.billStartTime).format('YYYY-MM-DD')}}至{{$moment(form.billEndTime).format('YYYY-MM-DD')}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <el-form :model="form" :rules="rules" ref="form">
        <el-table :data="form.houseBillItemMerges.filter(item => item.itemType === '1')" style="width: 100%"
                  :header-cell-style="{'backgroundColor': '#F2F2F2'}"
        >
          <el-table-column prop="itemName" label="费用名称"></el-table-column>
          <el-table-column prop="itemPrice" label="金额（元）"></el-table-column>
          <el-table-column prop="payVoucherAmount" label="本项拆出金额">
            <template slot-scope="scope">
              <el-input v-model="scope.row.disassembleFee" style="width: 100%" v-input.float="2"
                        @change="(e)=>scope.row.disassembleFee=Number(e)" v-if="scope.row.itemType === '1'"
              ></el-input>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="payVoucherType" label="本项剩余金额">
            <template slot-scope="scope">
              {{ (scope.row.itemPrice - Number(scope.row.disassembleFee)).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="default" @click="close">关闭</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { debounce } from '@/utils'
import { disassembleHouseBill } from '@/api/bill/houseBill'

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      default: '拆分账单'
    },
    data: {
      default: () => ({})
    }
  },
  dicts: ['pay_state'],
  data() {
    return {
      activeName: 'base', // 选项卡名称
      // 表单参数
      form: {
        payVoucherList: [], // 支付凭证列表,
        houseBillItemMerges: [] // 收费项目列表
      },
      rowsRules: {
        disassembleFee: [
          { required: true, message: '请输入本项拆出金额', trigger: 'blur' }]
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ] // 名称
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val) // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
      }
    },
    payMethodText() {
      return (value) => {
        let obj = [{ value: 1, label: '线上支付' }, { value: 2, label: '线下处理' }].find(item => item.value == value)
        return obj ? obj.label : ''
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    init() {
      this.reset()
    },
    //重置表单
    reset() {
      this.activeName = 'base'
      this.form = {
        billId: undefined, // 项目id
        payVoucherList: [] // 支付凭证列表,
      }
      this.resetForm('form')
      if (this.data.billId) {
        this.form = this.data
        this.form.payVoucherList = this.data.payVoucher ? this.data.payVoucher.split(',') : []
      }
    },
    //submit表单
    handleSubmit: debounce(function() {
      let disassembleFeeTotal = 0
      for (let i in this.form.houseBillItemMerges.filter(item => item.itemType === '1')) {
        if (this.form.houseBillItemMerges[i].disassembleFee === null || this.form.houseBillItemMerges[i].disassembleFee === '') {
          console.log(this.form.houseBillItemMerges[i].disassembleFee)
          this.$message.error('请输入拆出金额')
          return
        }
        if (this.form.houseBillItemMerges[i].disassembleFee > this.form.houseBillItemMerges[i].itemPrice) {
          this.$message.error('本项拆出金额不能大于本项金额')
          return
        }
        disassembleFeeTotal += this.form.houseBillItemMerges[i].disassembleFee
        if (disassembleFeeTotal <= 0) {
          this.$message.error('本项拆出金额之和需大于0元')
          return
        }
      }
      disassembleHouseBill(this.form).then(response => {
        this.$message.success(response.msg)
        this.$emit('success');
        this.close()
      }).catch(error => {
        this.$message.error(error.msg)
      })
    }, 500,false),
    //关闭弹窗
    close() {
      this.reset()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}

.container {
  .container__title {
    padding: 10px;
    background-color: #F2F2F2;
  }

  .container__content {
    padding: 10px;
  }
}
</style>
